<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页m</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .pull-right {float: right;}
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #96DBB9;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>拨打次数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" ><span id="bscs">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
<!--                                <small>当前分类通话总数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #72CFA1">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>接通数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jts">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
<!--                                <small>当前分类通话接通数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #34CD82">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>接通率</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jtl">0</span><span>%</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #11DD78">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>通话时长</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="thsc">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #00FF80">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>计费时长</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jfsc">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2 ">
                <div class="col-xs-6 col-md-3 " style="width:100%;">
                    <div class="panel layui-bg-red" style="width:100%;height:260px;">
                        <div class=" " style="text-align: center;">
                            <div class=" " style="padding-top: 60px">
                                <h1>坐席数据</h1>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="zxsl"></span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>同比上周</small><small id="zxsltb"></small>
<!--                                同比增长率=（本期数-同期数）÷同期数-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3 " style="width:100%;">
                    <div class="panel layui-bg-red" style="width:100%;height:260px;">
                        <div class=" " style="text-align: center;">
                            <div class=" " style="padding-top: 60px">
                                <h1>客户数据</h1>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="khsl"></span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>同比上周</small><small id="khsltb"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md8">
                <div class="col-xs-6 col-md-3">
                    <div class="layui-container" >
                        <div class="layui-row layui-col-space15">
                            <!-- 全局时间范围选择 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-header" style="height: 52px;">
                                        <div class="layui-form"
                                             style="min-width: 400px;max-height: 30px;display: inline-flex; margin-top: 8px;">

                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label" style="padding: 9px 8px">时间</label>
                                                    <div class="layui-input-inline">
                                                         <input class="layui-input" id="globalDate2" value="" placeholder=" " type="text">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 用户注册 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-sm12">
                                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                                     lay-filter="LAY-index-pagetwo" lay-anim="fade" style="width: 100%; ">
                                                    <div id="userRegisterCount" style="width:100%;height:500px;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md10">
                <div class="col-xs-6 col-md-3">
                    <div class="layui-container" >
                        <div class="layui-row layui-col-space15">
                            <!-- 全局时间范围选择 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-header" style="height: 52px;">
                                        <div class="layui-form"
                                             style="min-width: 400px;max-height: 30px;display: inline-flex; margin-top: 8px;">

                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label" style="padding: 9px 8px">时间范围</label>
                                                    <div class="layui-input-inline">
                                                    <input class="layui-input" id="globalDate" value="" placeholder=" " type="text">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <div class="layui-input-inline" style="width: 80px;">
                                                        <select class="global-time-unit" name="timeUnit" lay-filter="global-time-unit">
                                                            <option value="1">天</option>
                                                            <option value="2" selected>周</option>
                                                            <option value="3">月</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-inline">
                                                    <span style="color: red;" class="prompt_info"></span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 用户注册 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-sm12">
                                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                                     lay-filter="LAY-index-pagetwo" lay-anim="fade" style="width: 100%; ">
                                                    <div id="jfcsqs" style="width:100%;height:500px;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-box layui-hide">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">

            </div>
        </div>
    </div>

    <div class="layui-box layui-hide">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <blockquote class="layui-elem-quote main_btn">
                    <p>喜欢此后台模板的可以给我的Gitee加个Star支持一下</p>
<!--                    <p>Gitee地址：<a target="_blank" href='https://gitee.com/zwens/springboot-manager'><img src='https://gitee.com/zwens/springboot-manager/badge/star.svg?theme=dark' alt='star'></img></a></p>-->
                    <p style="float:left;">GitHub地址：
                        <div style="float:left;">
<!--                   <iframe src="https://ghbtns.com/github-btn.html?user=aitangbao&repo=springboot-manager&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>-->
                        </div>
                    </p>
                </blockquote>
            </div>
        </div>
    </div>

    <div class="layui-box layui-hide">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>昵称</th>
                        <th>加入时间</th>
                        <th>签名</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>wenbin</td>
                        <td>2020-03-18</td>
                        <td>人生就像是一场修行</td>
                    </tr>
                    <tr>
                        <td>wenbin</td>
                        <td>2020-03-18</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>wenbin</td>
                        <td>2020-03-18</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>wenbin</td>
                        <td>2020-03-18</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-col-md6">
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2020年3月18日</h3>
                            <p>
                                一切准备工作似乎都已到位。发布之弦，一触即发。
                                <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">过去</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/home.js?v=0.1"></script>
<script src="/js/common.js"></script>
<script src="/js/main.js"></script>
<script src="/js/echarts.min.js"></script>
</body>
<script>
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var form = layui.form;
    var element = layui.element;
    $(function(){
        CoreUtil.sendGet("/sys/home/", null, function (res) {
            userInfo = res.data.userInfo;
            userRoles = res.data.sysRole;
            userDepts = res.data.dept;
            hwtj = res.data.hwtj;
            if (!!hwtj) {
                var jtl = !!hwtj.jtl?hwtj.jtl+"":"0";
                $("#bscs").html(removeTrailingDotZero(hwtj.bscs));
                $("#jts").html(removeTrailingDotZero(hwtj.jts));
                $("#jtl").html(jtl);
                // $("#thsc").html(hwtj.thsc.replace(/\.?0+$/, ""));
                $("#thsc").html(removeTrailingDotZero(hwtj.thsc));
                // $("#jfsc").html(hwtj.jfsc.replace(/\.?0+$/, "")+"分");
                $("#jfsc").html(removeTrailingDotZero(hwtj.jfsc)+"分");
            }
        });
        CoreUtil.sendGet("/sys/home/tseatsData", null, function (res) {
            var code = res.code;
            var data = res.data;
            if (code == 0) {
                var type = "增长";
                const zxsl = document.getElementById('zxsl');
                zxsl.innerHTML = data.zxsl;
                if (data.zxsltb < 0 ) {
                    type = "下降";
                }
                const zxsltb = document.getElementById('zxsltb');
                zxsltb.innerHTML = type + data.zxsltb + "%";
                const khsl = document.getElementById('khsl');
                khsl.innerHTML = data.khsl;
                if (data.khsltb < 0 ) {
                    type = "下降";
                } else {
                    type = "增长";
                }
                const khsltb = document.getElementById('khsltb');
                khsltb.innerHTML = type + data.khsltb + "%";
            }
        });
    });

    function removeTrailingDotZero(num) {
        return num.toString().replace(/\.0$/, '');
    }
</script>
</html>